<template>
  <CommonHeaderComponent>
    <div slot="headTopContent" class="supervise_div">
      <a-tabs v-model="activtKey">
        <a-tab-pane key="1">
          <div slot="tab">
            {{ `全部案件 ${allDealNum ? '（' + allDealNum + '）' : '（0）'}` }}
          </div>
        </a-tab-pane>
        <a-tab-pane key="2">
          <div slot="tab">
            {{ `待处理 ${undoNeedDealNum ? '（' + undoNeedDealNum + '）' : '（0）'}` }}
          </div>
        </a-tab-pane>
        <a-tab-pane key="3">
          <div slot="tab">
            {{ `已处理 ${doneDealNum ? '（' + doneDealNum + '）' : '（0）'}` }}
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <CommonHeadQueryComponent
      slot="headContent"
      ref="acceptHandleHeadRef"
      :needMoreQuery="true"
      @onSearch="onSearch"
      @myEvent="myEvent"
      @onReset="reQuery"
    >
      <!-- 其他查询条件 -->
      <div slot="more">
        <a-form layout="inline" class="accept_more_operate_moreForm supervise_title_div">
          <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
            <a-collapse-panel :show-arrow="false" disabled key="1" style="font-weight: bold">
              <div slot="header" class="accept_more_operate_moreForm_collapse_head">
                <a-row :gutter="48" style="width: 100%">
                  <a-col @click.stop="() => {}" :md="8" :sm="24">
                    <a-form-item label="案件状态：">
                      <a-select
                        v-model="commonQueryParam.casestate"
                        style="width: 200px; font-weight: normal"
                        placeholder="请选择案件状态"
                        allowClear
                      >
                        <a-select-option v-for="item in caseStateList" :key="item.value" :value="item.value">
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>

                  <a-col @click.stop="() => {}" :md="8" :sm="24">
                    <a-form-item label="申请人：">
                      <a-input v-model="commonQueryParam.applyname" placeholder="请输入申请人" allowClear />
                    </a-form-item>
                  </a-col>
                  <a-col @click.stop="() => {}" :md="8" :sm="24">
                    <a-form-item label="被申请人：">
                      <a-input v-model="commonQueryParam.targetname" placeholder="请输入被申请人" allowClear />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
              <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
                <a-col @click.stop="() => {}" :md="8" :sm="24" style="padding-right: 0px">
                  <a-form-item label="来源：" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
                    <a-select
                      v-model="commonQueryParam.source"
                      style="width: 200px; font-weight: normal"
                      placeholder="请选择来源"
                      allowClear
                    >
                      <a-select-option v-for="item in Tp_applysourceList" :key="item.value" :value="item.value">
                        {{ item.name }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <!-- <a-col @click.stop="() => {}" :md="8" :sm="24">
                <a-form-item label="环节：">
                  <a-select v-model="commonQueryParam.category" style="width:200px;font-weight: normal;" placeholder="请选择环节" allowClear>
                    <a-select-option v-for="item in categoryList" :key="item.value" :value="item.value">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col> -->
                <a-col @click.stop="() => {}" :md="8" :sm="24" style="padding-right: 0px">
                  <a-form-item label="申请时间：" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
                    <a-date-picker
                      v-model="commonQueryParam.applyStartDate"
                      :style="{ width: 'calc(50% - 10px)' }"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="applyDateListen()"
                    />
                    ~
                    <a-date-picker
                      v-model="commonQueryParam.applyEndDate"
                      :style="{ width: 'calc(50% - 10px)' }"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="applyDateListen()"
                    />
                  </a-form-item>
                </a-col>

                <a-col @click.stop="() => {}" :md="8" :sm="24" style="padding-right: 0px">
                  <a-form-item label="办结时间：" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
                    <a-date-picker
                      v-model="commonQueryParam.finishStartDate"
                      :style="{ width: 'calc(50% - 10px)' }"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="finishDateListen()"
                    />
                    ~
                    <a-date-picker
                      v-model="commonQueryParam.finishEndDate"
                      :style="{ width: 'calc(50% - 10px)' }"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="finishDateListen()"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-collapse-panel>
          </a-collapse>
        </a-form>
      </div>

      <template slot="content">
        <!-- 表格数据 -->
        <div class="accept_content_table" v-if="activtKey == '1'">
          <a-table
            v-if="activtKey == '1'"
            :scroll="scroll"
            :columns="compreUcolumns"
            :data-source="allListData"
            :pagination="compreUpagination"
            :loading="firstLoading"
            rowKey="taskid"
            @change="compreTabelChange"
            size="middle"
            :bordered="ubordered"
            :rowClassName="rowClassName"
            :components="header"
            ref="table"
            :key="tableCountKey"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
            </span>

            <div slot="subtimeSlot" slot-scope="subtime" class="beyond_hiding" style="width: 100%">
              {{ subtime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <!--时间颜色显示-->
            <div
              slot="replyBackSlot"
              slot-scope="text, record"
              style="width: 100%"
              v-if="record.replyenddate != null && record.replyBack != undefined"
            >
              <a-tag color="green" v-if="record.replyBack > 30" style="color: green">
                {{ '剩余' + Math.abs(record.replyBack) + '天' }}</a-tag
              >
              <a-tag color="orange" v-else-if="record.replyBack >= 20 && record.replyBack < 30" style="color: orange">
                {{ '剩余' + Math.abs(record.replyBack) + '天' }}</a-tag
              >
              <a-tag color="red" v-else-if="record.replyBack < 20 && record.replyBack > 0" style="color: red">
                {{ '剩余' + Math.abs(record.replyBack) + '天' }}</a-tag
              >
              <a-tag color="red" v-else-if="record.replyBack < 0" style="color: red">
                {{ '已逾期' }}
              </a-tag>
            </div>

            <div slot="applynameSlot" slot-scope="applyname" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applyname }}</span>
                </template>
                {{ applyname }}
              </a-tooltip>
            </div>

            <div slot="targetnameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.targetname }}</span>
                </template>
                {{ record.targetname }}
              </a-tooltip>
            </div>

            <div slot="finishtimeSlot" slot-scope="finishtime" class="beyond_hiding" style="width: 100%">
              {{ finishtime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <!-- 当前用户 -->
            <template slot="assigneesSlot" slot-scope="text, record">
              <div v-if="text || record.assignees" style="width: 100%">
                {{ text ? text : record.assignees }}
              </div>

              <a-tooltip v-else-if="record.currentgroup" placement="topLeft">
                <div style="width: 100%">{{ record.groupname }}</div>
              </a-tooltip>
              <span v-else> </span>
            </template>

            <template slot="statusSlot" slot-scope="text, record">
              {{ record.status == St_applyValue.FINISH ? '已办结' : '未办结' }}
            </template>

            <template slot="operation" slot-scope="text, record">
              <a href="javascript:;" @click="caseView(record, '4')">详情</a>
            </template>
          </a-table>
        </div>
        <!-- 表格数据 -->
        <div class="accept_content_table" v-else-if="activtKey == '2'">
          <a-table
            v-if="activtKey == '2'"
            :scroll="scroll"
            :columns="ucolumns"
            :data-source="listData"
            :pagination="upagination"
            :loading="secondLoading"
            rowKey="taskid"
            @change="tableChange"
            size="middle"
            :bordered="ubordered"
            :rowClassName="rowClassName"
            :components="header"
            ref="table"
            :key="tableCountKey"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
            </span>

            <div slot="subtimeSlot" slot-scope="subtime" class="beyond_hiding" style="width: 100%">
              {{ subtime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <!--时间颜色显示-->
            <div
              slot="replyBackSlot"
              slot-scope="text, record"
              style="width: 100%"
              v-if="record.replyenddate != null && record.replyBack != undefined"
            >
              <a-tag color="green" v-if="record.replyBack > 30" style="color: green">
                {{ '剩余' + Math.abs(record.replyBack) + '天' }}</a-tag
              >
              <a-tag color="orange" v-else-if="record.replyBack >= 20 && record.replyBack < 30" style="color: orange">
                {{ '剩余' + Math.abs(record.replyBack) + '天' }}</a-tag
              >
              <a-tag color="red" v-else-if="record.replyBack < 20 && record.replyBack > 0" style="color: red">
                {{ '剩余' + Math.abs(record.replyBack) + '天' }}</a-tag
              >
              <a-tag color="red" v-else-if="record.replyBack < 0" style="color: red"> {{ '已逾期' }}</a-tag>
            </div>

            <div slot="applynameSlot" slot-scope="applyname" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applyname }}</span>
                </template>
                {{ applyname }}
              </a-tooltip>
            </div>

            <div slot="targetnameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.targetname_bz || record.targetname_bs }}</span>
                </template>
                {{ record.targetname_bz || record.targetname_bs }}
              </a-tooltip>
            </div>

            <div slot="thirdnameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.thirdname || record.thirdname_bs }}</span>
                </template>
                {{ record.thirdname || record.thirdname_bs }}
              </a-tooltip>
            </div>

            <template slot="operation" slot-scope="text, record">
              <span v-if="record.dealName">
                <a @click="showHand(record, '3')">处理</a>
                <a-divider type="vertical" />
              </span>
              <a href="javascript:;" @click="showHand(record, '4')">详情</a>
            </template>
          </a-table>
        </div>
        <div class="accept_content_table" v-else-if="activtKey == '3'">
          <a-table
            v-if="activtKey == '3'"
            :scroll="scroll"
            :columns="doneUcolumns"
            :data-source="doneListData"
            :pagination="doneUpagination"
            :loading="thirdLoading"
            rowKey="taskid"
            @change="doneTableChange"
            size="middle"
            :bordered="ubordered"
            :rowClassName="rowClassName"
            :components="header"
            ref="table"
            :key="tableCountKey"
          >
            <span slot="serial" slot-scope="text, record, index">
              {{ (doneUpagination.current - 1) * doneUpagination.pageSize + parseInt(index) + 1 }}
            </span>

            <div slot="subtimeSlot" slot-scope="subtime" class="beyond_hiding" style="width: 100%">
              {{ subtime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <div slot="finishtimeSlot" slot-scope="finishtime" class="beyond_hiding" style="width: 100%">
              {{ finishtime | getTimeFormat('YYYY年M月D日') }}
            </div>

            <div slot="replyBackSlot" slot-scope="text, record" class="overBox" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.replyBack }}</span>
                </template>
                {{ record.replyBack }}
              </a-tooltip>
            </div>

            <div slot="applynameSlot" slot-scope="applyname" class="overBox" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ applyname }}</span>
                </template>
                {{ applyname }}
              </a-tooltip>
            </div>

            <div slot="targetnameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.targetname_bz || record.targetname_bs }}</span>
                </template>
                {{ record.targetname_bz || record.targetname_bs }}
              </a-tooltip>
            </div>

            <div slot="thirdnameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ record.thirdname || record.thirdname_bs }}</span>
                </template>
                {{ record.thirdname || record.thirdname_bs }}
              </a-tooltip>
            </div>

            <template slot="operation" slot-scope="text, record">
              <a href="javascript:;" @click="showHand(record, '4')">详情</a>
            </template>
          </a-table>
        </div>
      </template>
    </CommonHeadQueryComponent>
  </CommonHeaderComponent>
</template>

<script>
import { SuperviseCommonMinxin } from '@/views/supervise/SuperviseCommonMinxin'
import { getViewTaskByInstid } from '@/api/worktasks/wt_personal.js'
import moment from 'moment'
import { queryMf_MyTaskDoneList } from '@/api/workflow/mf_MyTaskDone'
import { queryMf_MyTaskUndoList } from '@/api/workflow/mf_MyTaskUndo.js'
import { SuperviseCompreQuery } from '@/api/workflow/wf_CompreQuery.js'
import { St_applyValue } from '@/enumeration/St_apply.js'
const ucolumns = [
  {
    title: '序号',
    width: 50,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    width: 250,
    align: 'center'
  },
  {
    title: '反馈提醒',
    dataIndex: 'replyBack',
    key: 'replyBack',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'replyBackSlot' }
  },
  {
    title: '业务名称',
    dataIndex: 'process',
    key: 'process',
    width: 200,
    align: 'center'
  },
  {
    title: '环节',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    align: 'center'
  },
  {
    title: '反馈截止时间',
    dataIndex: 'replyenddate',
    key: 'replyenddate',
    width: 150,
    align: 'center'
  },
  {
    title: '申请人名称',
    dataIndex: 'applyname',
    key: 'applyname',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人名称',
    dataIndex: 'targetname_text',
    key: 'targetname_text',
    width: 250,
    align: 'center',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '申请时间',
    dataIndex: 'subtime',
    key: 'subtime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'subtimeSlot' }
  },
  {
    title: '来源',
    dataIndex: 'source_text',
    key: 'source_text',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'sourceSlot' }
  },
  {
    title: '承办人',
    width: 150,
    key: 'dealName',
    dataIndex: 'dealName',
    align: 'center',
    scopedSlots: { customRender: 'dealNameSlot' }
  },
  {
    title: '辅助人',
    width: 150,
    key: 'thirdname',
    dataIndex: 'thirdname',
    align: 'center',
    scopedSlots: { customRender: 'thirdnameSlot' }
  },
  {
    title: '录入人',
    width: 150,
    key: 'startuserid',
    dataIndex: 'startuserid',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 220,
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'operation' }
  }
]
const doneUcolumns = [
  {
    title: '序号',
    width: 50,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    width: 280,
    align: 'center',
    scopedSlots: { customRender: 'acceptcodeSlot' }
  },
  {
    title: '业务名称',
    dataIndex: 'process',
    key: 'process',
    width: 200,
    align: 'center'
  },
  {
    title: '环节',
    dataIndex: 'name',
    key: 'name',
    width: 150,
    align: 'center'
  },
  {
    title: '申请人名称',
    dataIndex: 'applyname',
    key: 'applyname',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人名称',
    dataIndex: 'targetname_text',
    key: 'targetname_text',
    width: 250,
    align: 'center',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '申请时间',
    dataIndex: 'subtime',
    key: 'subtime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'subtimeSlot' }
  },
  {
    title: '办结时间',
    dataIndex: 'finishtime',
    key: 'finishtime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'finishtimeSlot' }
  },
  {
    title: '来源',
    dataIndex: 'source_text',
    key: 'source_text',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'sourceSlot' }
  },
  {
    title: '承办人',
    width: 150,
    key: 'dealName',
    dataIndex: 'dealName',
    align: 'center',
    scopedSlots: { customRender: 'dealNameSlot' }
  },
  {
    title: '辅助人',
    width: 150,
    key: 'thirdname',
    dataIndex: 'thirdname',
    align: 'center',
    scopedSlots: { customRender: 'thirdnameSlot' }
  },
  {
    title: '录入人',
    width: 150,
    key: 'startuserid',
    dataIndex: 'startuserid',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 220,
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'operation' }
  }
]

const compreUcolumns = [
  {
    title: '序号',
    width: 50,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '案号',
    dataIndex: 'acceptcode',
    key: 'acceptcode',
    width: 280,
    align: 'center',
    scopedSlots: { customRender: 'acceptcodeSlot' }
  },
  {
    title: '反馈提醒',
    dataIndex: 'replyBack',
    key: 'replyBack',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'replyBackSlot' }
  },
  {
    title: '业务名称',
    dataIndex: 'name_',
    key: 'name_',
    width: 200,
    align: 'center'
  },
  {
    title: '环节',
    dataIndex: 'step_text',
    key: 'step_text',
    width: 150,
    align: 'center'
  },
  {
    title: '申请人名称',
    dataIndex: 'applyname',
    key: 'applyname',
    width: 200,
    align: 'center',
    scopedSlots: { customRender: 'applynameSlot' }
  },
  {
    title: '被申请人名称',
    dataIndex: 'targetname',
    key: 'targetname',
    width: 250,
    align: 'center',
    scopedSlots: { customRender: 'targetnameSlot' }
  },
  {
    title: '申请时间',
    dataIndex: 'subtime',
    key: 'subtime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'subtimeSlot' }
  },
  {
    title: '来源',
    dataIndex: 'source_text',
    key: 'source_text',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'sourceSlot' }
  },
  {
    title: '当前处理人',
    dataIndex: 'assignees',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'assigneesSlot' }
  },
  {
    title: '承办人',
    width: 150,
    key: 'dealName',
    dataIndex: 'dealName',
    align: 'center',
    scopedSlots: { customRender: 'dealNameSlot' }
  },
  {
    title: '辅助人',
    width: 150,
    key: 'thirdname',
    dataIndex: 'thirdname',
    align: 'center'
  },
  {
    title: '录入人',
    width: 150,
    key: 'regusername',
    dataIndex: 'regusername',
    align: 'center'
  },
  {
    title: '案件办结状态',
    width: 150,
    key: 'status',
    dataIndex: 'status',
    align: 'center',
    scopedSlots: { customRender: 'statusSlot' }
  },
  {
    title: '办结时间',
    dataIndex: 'finishtime',
    key: 'finishtime',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'finishtimeSlot' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 220,
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'operation' }
  }
]

const categoryList = [
  {
    name: '审查材料',
    value: 'evidence'
  },
  {
    name: '决定',
    value: 'decision'
  },
  {
    name: '通知整改',
    value: 'rectify'
  }
]
const caseStateList = [
  {
    name: '全部案件',
    value: 0
  },
  {
    name: '待处理',
    value: 1
  },
  {
    name: '已处理',
    value: 2
  }
]
export default {
  mixins: [SuperviseCommonMinxin],
  data () {
    return {
      ucolumns: ucolumns,
      doneUcolumns: doneUcolumns,
      compreUcolumns: compreUcolumns,
      categoryList: categoryList,
      caseStateList: caseStateList,
      St_applyValue: St_applyValue,
      commonQueryParam: {
        casestate: 0, // 案件状态
        applyname: '', // 申请人
        targetname: '', // 被申请人
        applyStartDate: null, // 开始时间
        applyEndDate: null, // 结束时间
        source: undefined, // 来源
        category: undefined, // 环节标识
        finishStartDate: undefined, // 办结完成开始日期
        finishEndDate: undefined // 办结结束开始日期
      },
      queryParam: {
        acceptcode: '', // 案号
        applyname: '', // 申请人
        targetname: '', // 被申请人
        applyStartDate: null, // 开始时间
        applyEndDate: null, // 结束时间
        source: undefined, // 来源
        pageNumber: 1,
        pageSize: 20,
        order: 'desc',
        userid: '', // 用户id
        state: '1',
        bizenum: null,
        matid: null,
        departid: null, // 部门
        category: undefined, // 环节标识
        categorynone: null, // 不相同的环节标识
        isAssigned: null, // 是否分派
        statusapply: []
      },
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        // showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      donQueryParam: {
        acceptcode: '', // 案号
        applyname: '', // 申请人
        targetname: '', // 被申请人
        applyStartDate: null, // 开始时间
        applyEndDate: null, // 结束时间
        finishStartDate: undefined, // 办结完成开始日期
        finishEndDate: undefined, // 办结结束开始日期
        source: undefined, // 来源
        pageNumber: 1,
        pageSize: 20,
        order: 'desc',
        userid: '', // 用户id
        state: '1',
        departid: null, // 部门
        bizenum: null,
        matid: null,
        category: null,
        statusapply: []
      },
      doneUpagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        // showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      compreQueryParam: {
        f_code: '', // 案号
        f_applyname: '', // 申请人
        f_targetname: '', // 被申请人
        accepttime_start: null, // 开始时间
        accepttime_end: null, // 结束时间
        finishDate_start: undefined, // 办结完成开始日期
        finishDate_end: undefined, // 办结结束开始日期
        f_source: undefined, // 来源
        matid: '100000_360100-000201005000-QT-002-02', // matid
        pageNumber: 1,
        pageSize: 20,
        order: 'desc',
        userid: '' // 用户id
      },
      compreUpagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        // showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      firstLoading: false,
      secondLoading: false,
      thirdLoading: false,

      activtKey: '1'
    }
  },
  created () {
    // console.log('this.$route.query.queryParam.queryList', this.$route.query.queryParam)
    // let routeParam
    // try {
    //   routeParam = JSON.parse(JSON.stringify(this.$route.query.queryParam))
    //   this.commonQueryParam = { ...this.commonQueryParam, ...this.$route.query.queryParam }
    // } catch {
    //   console.log('路由传参非json格式')
    // }
    this.headerChange()
    this.$nextTick(() => {
      this.initDefaultParam()
      this.initDoneDefaultParam()
      this.queryCompreQuery()
      this.onSearch()
    })
  },
  methods: {
    myEvent (e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 360
      }
    },
    /**
     * 初始化设置默认值
     */
    initDefaultParam () {
      this.queryParam.userid = this.currentUser.userId
      this.queryParam.bizenum = this.Tp_biztype['supervise'].value
      this.queryParam.matid = '100000_360100-000201005000-QT-002-02'
      this.queryParam.isAssigned = true
    },
    /**
     * 初始化设置默认值
     */
    initDoneDefaultParam () {
      this.donQueryParam.userid = this.currentUser.userId
      this.donQueryParam.bizenum = this.Tp_biztype['supervise'].value
      this.donQueryParam.matid = '100000_360100-000201005000-QT-002-02'
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery () {
      this.commonQueryParam = {
        casestate: 0, // 案件状态
        applyname: '', // 申请人
        targetname: '', // 被申请人
        applyStartDate: null, // 开始时间
        applyEndDate: null, // 结束时间
        source: undefined, // 来源
        category: undefined, // 环节标识
        finishStartDate: undefined, // 办结完成开始日期
        finishEndDate: undefined // 办结结束开始日期
      }
      // 待处理查询param
      this.queryParam = {
        acceptcode: '', // 案号
        applyname: '', // 申请人
        targetname: '', // 被申请人
        applyStartDate: null, // 开始时间
        applyEndDate: null, // 结束时间
        source: undefined, // 来源
        pageNumber: 1,
        pageSize: 20,
        order: 'desc',
        userid: '', // 用户id
        state: '1',
        bizenum: null,
        matid: null,
        departid: null, // 部门
        category: undefined, // 环节标识
        categorynone: null, // 不相同的环节标识
        isAssigned: null, // 是否分派
        statusapply: []
      }
      // 已处理查询param
      this.donQueryParam = {
        acceptcode: '', // 案号
        applyname: '', // 申请人
        targetname: '', // 被申请人
        applyStartDate: null, // 开始时间
        applyEndDate: null, // 结束时间
        finishStartDate: undefined, // 办结完成开始日期
        finishEndDate: undefined, // 办结结束开始日期
        source: undefined, // 来源
        pageNumber: 1,
        pageSize: 20,
        order: 'desc',
        userid: '', // 用户id
        state: '1',
        departid: null, // 部门
        bizenum: null,
        matid: null,
        category: null,
        statusapply: []
      }
      // 综合查询接口
      this.compreQueryParam = {
        f_code: '', // 案号
        f_applyname: '', // 申请人
        f_targetname: '', // 被申请人
        accepttime_start: null, // 开始时间
        accepttime_end: null, // 结束时间
        finishDate_start: undefined, // 办结完成开始日期
        finishDate_end: undefined, // 办结结束开始日期
        f_source: undefined, // 来源
        matid: '100000_360100-000201005000-QT-002-02', // matid
        pageNumber: 1,
        pageSize: 20,
        order: 'desc',
        userid: '' // 用户id
      }
      // 综合查询param
      this.initDefaultParam()
      this.initDoneDefaultParam()
      this.queryUndoList()
      this.queryDoneList()
      this.queryCompreQuery()
    },

    tableChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryUndoList()
    },
    doneTableChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.donQueryParam.pageNumber = upagination.current
      this.donQueryParam.pageSize = upagination.pageSize
      this.queryDoneList()
    },
    compreTabelChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.compreQueryParam.pageNumber = upagination.current
      this.compreQueryParam.pageSize = upagination.pageSize
      this.queryCompreQuery()
    },

    onSearch (val) {
      this.queryParam.acceptcode = val
      this.queryParam.pageNumber = 1
      this.queryParam.pageSize = 20
      this.donQueryParam.acceptcode = val
      this.donQueryParam.pageNumber = 1
      this.donQueryParam.pageSize = 20
      this.compreQueryParam.f_code = val
      this.compreQueryParam.pageNumber = 1
      this.compreQueryParam.pageSize = 20
      if (!this.commonQueryParam.casestate || this.commonQueryParam.casestate === 0) {
        this.queryUndoList()
        this.queryDoneList()
        this.queryCompreQuery()
      } else if (this.commonQueryParam.casestate === 1) {
        this.queryUndoList()
      } else if (this.commonQueryParam.casestate === 2) {
        this.queryDoneList()
      }
    },
    getCpQueryParam () {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.commonQueryParam))
      if (this.commonQueryParam.applyStartDate?.format) {
        cpQueryParam.applyStartDate = this.commonQueryParam.applyStartDate.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.commonQueryParam.applyEndDate?.format) {
        cpQueryParam.applyEndDate = this.commonQueryParam.applyEndDate.format('YYYY-MM-DD') + ' 23:59:59'
      }
      if (this.commonQueryParam.finishStartDate?.format) {
        cpQueryParam.finishStartDate = this.commonQueryParam.finishStartDate.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.commonQueryParam.finishEndDate?.format) {
        cpQueryParam.finishEndDate = this.commonQueryParam.finishEndDate.format('YYYY-MM-DD') + ' 23:59:59'
      }
      return cpQueryParam
    },

    queryUndoList () {
      let queryParam = this.getCpQueryParam()
      if (queryParam.acceptcode) {
        queryParam.acceptcode = queryParam.acceptcode.toString().trim()
      }
      if (queryParam.targetname) {
        queryParam.targetname = queryParam.targetname.toString().trim()
      }
      if (queryParam.applyname) {
        queryParam.applyname = queryParam.applyname.toString().trim()
      }
      queryParam = { ...this.queryParam, ...queryParam }
      this.secondLoading = true
      queryMf_MyTaskUndoList({ userid: queryParam.userid }, queryParam)
        .then(res => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.listData = res.data.records
            this.upagination.total = res.data.total
            this.upagination.current = res.data.current
            this.upagination.pageSize = res.data.size
            this.undoNeedDealNum = res.data.total
            this.setEnumData(this.listData)
          }
        })
        .catch(err => {
          this.listData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.secondLoading = false
        })
    },
    queryDoneList () {
      let queryParam = this.getCpQueryParam()
      if (queryParam.acceptcode) {
        queryParam.acceptcode = queryParam.acceptcode.toString().trim()
      }
      if (queryParam.targetname) {
        queryParam.targetname = queryParam.targetname.toString().trim()
      }
      if (queryParam.applyname) {
        queryParam.applyname = queryParam.applyname.toString().trim()
      }
      queryParam = { ...this.donQueryParam, ...queryParam }
      this.thirdLoading = true
      queryMf_MyTaskDoneList(queryParam.userid, queryParam)
        .then(res => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.doneListData = res.data.records
            this.doneUpagination.total = res.data.total
            this.doneUpagination.current = res.data.current
            this.doneUpagination.pageSize = res.data.size
            this.doneDealNum = res.data.total
            this.setDoneEnumData(this.doneListData)
          }
        })
        .catch(err => {
          this.doneListData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.thirdLoading = false
        })
    },
    queryCompreQuery () {
      const queryParam = this.getCpQueryParam()
      if (queryParam.acceptcode) {
        queryParam.acceptcode = queryParam.acceptcode.toString().trim()
      }
      if (queryParam.targetname) {
        queryParam.targetname = queryParam.targetname.toString().trim()
      }
      if (queryParam.applyname) {
        queryParam.applyname = queryParam.applyname.toString().trim()
      }

      const compreQueryParam = JSON.parse(JSON.stringify(this.compreQueryParam))
      compreQueryParam.f_applyname = queryParam.applyname
      compreQueryParam.f_targetname = queryParam.targetname
      compreQueryParam.f_source = queryParam.source
      compreQueryParam.accepttime_start = queryParam.applyStartDate
      compreQueryParam.accepttime_end = queryParam.applyEndDate
      compreQueryParam.finishDate_start = queryParam.finishStartDate
      compreQueryParam.finishDate_end = queryParam.finishEndDate
      this.firstLoading = true
      SuperviseCompreQuery(compreQueryParam)
        .then(res => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.allListData = res.data.records
            this.compreUpagination.total = res.data.total
            this.compreUpagination.current = res.data.current
            this.compreUpagination.pageSize = res.data.size
            this.allDealNum = res.data.total
            this.setCompreEnumData(this.allListData)
          }
        })
        .catch(err => {
          this.allListData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.firstLoading = false
        })
    },

    // 设置对应的枚举值
    setEnumData (listData) {
      if (listData && listData.length > 0) {
        for (var index = 0; index < listData.length; index++) {
          const item = listData[index]
          if (item) {
            // 被申请人名称
            item.targetname_text = item.targetname
            // 来源
            item.source_text = this.sourceLable(item.source)
            // 承办人
            let dealNames = []
            dealNames.push(item.firstname || item.firstname_bs)
            dealNames.push(item.secondname || item.secondname_bs)
            dealNames = dealNames.filter(el => el != null && el != '')
            item.dealName = dealNames.join('，')
            // 截止时间
            if (item.replyenddate) {
              let replyenddate = item.replyenddate
              // YYYY年mm月DD日
              var year = replyenddate.substring(0, replyenddate.indexOf('年'))
              var month = replyenddate.substring(replyenddate.indexOf('年') + 1, replyenddate.indexOf('月'))
              var day = replyenddate.substring(replyenddate.indexOf('月') + 1, replyenddate.indexOf('日'))
              replyenddate = year + '-' + month + '-' + day
              // moment
              item.replyBack = moment(replyenddate).diff(moment(new Date()), 'days')
            } else {
              item.replyBack = null
            }
          }
        }
      }
    },
    // 设置对应的枚举值
    setDoneEnumData (listData) {
      if (listData && listData.length > 0) {
        for (var index = 0; index < listData.length; index++) {
          const item = listData[index]
          if (item) {
            // 被申请人名称
            item.targetname_text = item.targetname
            // 来源
            item.source_text = this.sourceLable(item.source)
            // 承办人
            let dealNames = []
            dealNames.push(item.firstname || item.firstname_bs)
            dealNames.push(item.secondname || item.secondname_bs)
            dealNames = dealNames.filter(el => el != null && el != '')
            item.dealName = dealNames.join('，')
          }
        }
      }
    },
    // 设置对应的枚举值
    setCompreEnumData (listData) {
      if (listData && listData.length > 0) {
        for (var index = 0; index < listData.length; index++) {
          const item = listData[index]
          if (item) {
            // 被申请人名称
            item.targetname_text = item.targetname
            // 来源
            item.source_text = this.sourceLable(item.source)
            // 承办人
            let dealNames = []
            dealNames.push(item.firstname || item.firstname_bs)
            dealNames.push(item.secondname || item.secondname_bs)
            dealNames = dealNames.filter(el => el != null && el != '')
            item.dealName = dealNames.join('，')
            item.step_text = item.step ? Array.from(new Set(item.step.split(','))).join() : ''
            // 截止时间
            if (item.enddate) {
              let replyenddate = item.enddate
              // YYYY年mm月DD日
              var year = replyenddate.substring(0, replyenddate.indexOf('年'))
              var month = replyenddate.substring(replyenddate.indexOf('年') + 1, replyenddate.indexOf('月'))
              var day = replyenddate.substring(replyenddate.indexOf('月') + 1, replyenddate.indexOf('日'))
              replyenddate = year + '-' + month + '-' + day
              // moment
              item.replyBack = moment(replyenddate).diff(moment(new Date()), 'days')
            } else {
              item.replyBack = null
            }
          }
        }
      }
    },

    // 查看操作
    async caseView (record) {
      const { data } = await getViewTaskByInstid(record.processinstanceid)
      if (data == null) {
        this.$message.error('未找到taskid')
        return
      }
      this.$router.push({
        path: `/SuperviseTodoOpearation/${data}/4`,
        query: {
          url: '/SuperviseTodo',
          queryParam: this.commonQueryParam
        }
      })
    },

    // 接收时间监听判断开始结束日期是否合理
    applyDateListen () {
      if (
        this.queryParam.applyStartDate > this.queryParam.applyEndDate &&
        this.queryParam.applyStartDate &&
        this.queryParam.applyEndDate
      ) {
        this.queryParam.applyStartDate = undefined
      }
    },
    finishDateListen () {
      if (
        this.queryParam.finishStartDate > this.queryParam.finishEndDate &&
        this.queryParam.finishStartDate &&
        this.queryParam.finishEndDate
      ) {
        this.queryParam.finishStartDate = undefined
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';
</style>

<style lang="scss" scoped>
@import '~@/assets/css/apply/breathingLamp.scss';
.cursor_pointer:hover {
  color: #55a7f5;
}
::v-deep .ant-tabs-tab:hover {
  color: inherit !important;
}
::v-deep .ant-tabs-nav-scroll {
  margin-left: 20px;
}
::v-deep .accept_main_tip_label_div {
  width: 300px !important;
}
::v-deep .ant-tabs-bar {
  margin-bottom: 0px;
}
::v-deep .ant-tabs-nav .ant-tabs-tab {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 16px;
  margin: 0 16px 10px 0;
  line-height: 0px;
}
::v-deep .ant-tabs-nav-scroll {
  background: white;
  padding-left: 10px;
  margin-left: 0px;
}

.supervise_div {
  ::v-deep .ant-tabs-ink-bar {
    margin: 0px 6%;
    width: 50px !important;
  }
}
.supervise_title_div {
  ::v-deep .ant-form-item-label {
    margin: 0px 8px;
    text-align: right;
    min-width: 80px;
  }
}

::v-deep .ant-tabs-nav-wrap {
  display: inherit;
}
.accept_content {
  &_table {
    &_font_red {
      color: #ca0000;
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 400;
      color: #2c2c2c;
    }

    ::v-deep .ant-table-thead > tr > th {
      height: 50px;
    }

    ::v-deep .ant-table-row-cell-break-word {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 600;
      color: #2c2c2c;
    }

    // ::v-deep .ant-pagination-total-text {
    //   font-size: 16px;
    //   font-family: 'PingFang-SC-Heavy';
    //   font-weight: 400;
    //   color: #8e97b9;
    // }

    ::v-deep .ant-table-body,
    .ant-table-header {
      word-break: break-all;
      &::-webkit-scrollbar {
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        // height: 10px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #a2c6e1;
      }
      &::-webkit-scrollbar-track {
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: transparent;
      }
    }
  }
}
</style>
